<template>
  <div id="backcont">
    <div class="regis-content">
      <div class="regist-cont">
        <div class="MBTI-title">MBTI职业性格测试</div>
        <!-- <div class="MBTI-regist"> -->
        <div class="MBTI-user">
          <el-form-item label="学院" :label-width="formLabelWidth">
            <el-select v-model="CollegeName" placeholder="选择学院">
              <el-option label="计算机科学与工程学院" value="计算机科学与工程学院" />
              <!-- <el-option label="Zone No.2" value="beijing" /> -->
            </el-select>
          </el-form-item>
        </div>
        <div class="MBTI-user">
          <el-form-item label="专业" :label-width="formLabelWidth">
            <el-select v-model="DepartmentName" placeholder="选择专业">
              <el-option label="软件工程" value="软件工程" />
              <el-option label="网络工程" value="网络工程" />
            </el-select>
          </el-form-item>
        </div>
        <div class="MBTI-user">
          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-select v-model="classId" placeholder="选择班级">
              <el-option label="软件:1" value="1" />
              <el-option label="网络:21" value="21" />
            </el-select>
          </el-form-item>
        </div>

        <div class="MBTI-user">
          <el-form-item label="学号" :label-width="formLabelWidth">
            <el-input v-model="studentId" autocomplete="off" />
          </el-form-item>
        </div>
        <div class="MBTI-user">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="StudentName" autocomplete="off" />
          </el-form-item>
        </div>  
        <div class="MBTI-user">
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="StudentAge" autocomplete="off" />
          </el-form-item>
        </div>
        <div class="MBTI-user">
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="StudentSex" autocomplete="off" />
          </el-form-item>
        </div>
        <div class="MBTI-user">
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="password" autocomplete="off" />
          </el-form-item>
        </div>

        <!-- 登录和注册按钮的切换 -->
        <el-button @click="Regist" class="reg-views">注册</el-button>
        <!-- 登录或注册按钮的提交 -->
        <el-button @click="tologin" class="denglu-btn">登录</el-button>

      </div>
    </div>
  </div>
  <!-- </div> -->

</template>


<script>
import { ElMessage } from 'element-plus'

import {useRouter} from 'vue-router'
import { reactive,toRefs,getCurrentInstance  } from 'vue'
export default{
  setup(){
    const formLabelWidth = '140px'
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    const user = reactive({
      CollegeName:'',
      DepartmentName:'',
      classId:'',
      studentId:'',
      StudentName:'',
      StudentAge:'',
      StudentSex:'',
      password:'',
    })

    //跳转到登录界面
    const tologin = ()=>{
      router.push({
        name: "v_login",
      });
    }

   //进行注册功能
   const Regist = async()=>{
    const obj = {
      CollegeName:    user.CollegeName, 
      DepartmentName: user.DepartmentName,
      classId:        user.classId,
      studentId:      user.studentId,
      StudentName:    user.StudentName,
      StudentAge:     user.StudentAge,
      StudentSex:     user.StudentSex,
      password:       user.password
      
    }
    try{
      const res = await new proxy.$request(proxy.$urls.m().register, obj).modepost()
    
      if(res.status = 200){
         ElMessage('注册成功')
      }else{
        ElMessage('请重新输入')
      }

    }catch(e){
         ElMessage('请重新输入')
    }

      
   };

   
    return{formLabelWidth,...toRefs(user), proxy, tologin, Regist}
  }
}

</script>


<style >

</style>
